import Taro, { Component } from '@tarojs/taro';
import { View, Button, Text, Image } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import {showDrawer, hideDrawer, changeCata} from '../../actions/menu';
import {AtDrawer} from 'taro-ui';
import './menu.less';

@connect(function(store){
    return {...store.menu}
},function(dispatch){
    return {
        showMenu(){
            dispatch(showDrawer())
        },
        hideMenu(){
            dispatch(hideDrawer())
        },
        changeCata(cata){
            dispatch(changeCata(cata))
        },
    }
})
class Menu extends Component{
    //显示抽屉
    showDrawer(){
        this.props.showMenu && this.props.showMenu();
    }
    getItems(cataData){
        return cataData.map(item=>item.value);
    }
    //点击分类时触发
    clickCata(index){
        let {cataData} = this.props;
        let clickCata = cataData[index];//获取点击项的数据
        this.props.changeCata && this.props.changeCata(clickCata);//点击分类 触发分类方法
    }
    //关闭抽屉时触发
    closeDrawer(){
        this.props.hideMenu && this.props.hideMenu();
    }
    render(){
        let {showDrawer,cataData} =this.props;
        let items= this.getItems(cataData);
        return (
            <View className='topiclist-menu'>
                <AtDrawer onClose={this.closeDrawer.bind(this)} onItemClick={this.clickCata.bind(this)} style='position:absolute;' show={showDrawer} items={items}/>
                <Image onClick={this.showDrawer.bind(this)} className='image' src={require('../../assets/img/star.png')}/>
                <Text>{this.props.currentCata?this.props.currentCata.value:''}</Text>
                <Image className='image' src={require('../../assets/img/star.png')}/>
            </View>
        )
    }
}
export default Menu;